<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>DEMO</title>
</head>
<style>
  #app-cockpit-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 111;
    background: #212327;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .svg-box {
    width: 110px;
    height: 34px;
  }


  body {
    background: #25262B;
  }

  #app-cockpit-loading>svg {
    stroke: transparent;
  }

  #app-cockpit-loading circle {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    will-change: transform;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
  }

  #app-cockpit-loading circle:nth-child(1) {
    -webkit-animation: lds-1-e1a15m3u .6s infinite;
    animation: lds-1-e1a15m3u .6s infinite
  }

  #app-cockpit-loading circle:nth-child(2) {
    -webkit-animation: lds-2-e1a15m3u .6s infinite;
    animation: lds-2-e1a15m3u .6s infinite
  }

  #app-cockpit-loading circle:nth-child(3) {
    -webkit-animation: lds-2-e1a15m3u .6s infinite;
    animation: lds-2-e1a15m3u .6s infinite
  }

  #app-cockpit-loading circle:nth-child(4) {
    -webkit-animation: lds-3-e1a15m3u .6s infinite;
    animation: lds-3-e1a15m3u .6s infinite
  }

  @-webkit-keyframes lds-1-e1a15m3u {
    0% {
      -webkit-transform: scale(.4) translateX(28.57%);
      -ms-transform: scale(.4) translateX(28.57%);
      transform: scale(.4) translate(28.57%);
      opacity: .3
    }

    to {
      -webkit-transform: scale(1) translateX(0%);
      -ms-transform: scale(1) translateX(0%);
      transform: scale(1) translate(0);
      opacity: 1
    }
  }

  @keyframes lds-1-e1a15m3u {
    0% {
      -webkit-transform: scale(.4) translateX(28.57%);
      -ms-transform: scale(.4) translateX(28.57%);
      transform: scale(.4) translate(28.57%);
      opacity: .3
    }

    to {
      -webkit-transform: scale(1) translateX(0%);
      -ms-transform: scale(1) translateX(0%);
      transform: scale(1) translate(0);
      opacity: 1
    }
  }

  @-webkit-keyframes lds-2-e1a15m3u {
    0% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translate(0)
    }

    to {
      -webkit-transform: translateX(28.57%);
      -ms-transform: translateX(28.57%);
      transform: translate(28.57%)
    }
  }

  @keyframes lds-2-e1a15m3u {
    0% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translate(0)
    }

    to {
      -webkit-transform: translateX(28.57%);
      -ms-transform: translateX(28.57%);
      transform: translate(28.57%)
    }
  }

  @-webkit-keyframes lds-3-e1a15m3u {
    0% {
      -webkit-transform: scale(1) translateX(0%);
      -ms-transform: scale(1) translateX(0%);
      transform: scale(1) translate(0);
      opacity: 1
    }

    to {
      -webkit-transform: scale(.4) translateX(-28.57%);
      -ms-transform: scale(.4) translateX(-28.57%);
      transform: scale(.4) translate(-28.57%);
      opacity: .3
    }
  }

  @keyframes lds-3-e1a15m3u {
    0% {
      -webkit-transform: scale(1) translateX(0%);
      -ms-transform: scale(1) translateX(0%);
      transform: scale(1) translate(0);
      opacity: 1
    }

    to {
      -webkit-transform: scale(.4) translateX(-28.57%);
      -ms-transform: scale(.4) translateX(-28.57%);
      transform: scale(.4) translate(-28.57%);
      opacity: .3
    }
  }
</style>

<body>
  <div id="app-cockpit-loading">
    <div class="svg-box" style="width: 110px">
      <svg viewBox="0 0 84 24" fill="#fdc113">
        <circle cx="18" cy="12" r="6"></circle>
        <circle cx="18" cy="12" r="6"></circle>
        <circle cx="42" cy="12" r="6"></circle>
        <circle cx="66" cy="12" r="6"></circle>
      </svg>
    </div>
  </div>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script>
    window.addEventListener('load', function () {
      var loadingElement = document.getElementById('app-cockpit-loading');
      if (loadingElement) {
        loadingElement.style.display = 'none';
      }
    });
  </script>
</body>

</html>